<template>
  <view class="comBox">
    <div v-if="uSex === '' || uAge === ''" class="u-info">
      <div class="title">用户信息</div>
      <div class="u-form">
        <view v-if="uSex === ''" class="inputBox marginRight50">
          <span class="name lineHeight86 requestField">性别</span>
          <view class="sickBox">
            <view v-for="item in sexItem" :key="item.value" class="sickBtn" @click="choseSex(item.value)">
              {{ item.name }}
              <view v-show="item.value === formData.sex" class="cur"><img :src="curIcon" /></view>
            </view>
          </view>
          <view class="clear"></view>
        </view>
        <view v-if="uAge === ''" class="inputBox">
          <span class="name lineHeight86 requestField">生日</span>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker
                  class="pickStyle"
                  mode="date"
                  name="birthday"
                  :value="formData.birthday"
                  :start="startDate"
                  :end="endDate"
                  @change="bindDateChange"
                >
                  <view class="uni-input">
                    <span v-if="formData.birthday">{{ formData.birthday }}</span>
                    <span v-else class="grey">请选择生日</span>
                  </view>
                  <view class="inputIcon"><img :src="require('../images/icons/right.png')" /></view>
                </picker>
              </view>
            </view>
          </view>
          <view class="clear"></view>
        </view>
      </div>
    </div>

    <sickTitleCom></sickTitleCom>
    <view class="cont">
      <!-- <view class="name titleBold"> 您的身高体重 </view> -->
      <view class="inputBox">
        <view class="name lineHeight86">您的身高是?</view>
        <!-- <input
          id="height"
          v-model="mainData.height"
          type="digit"
          class="uni-input lineHeight86"
          name="height"
          placeholder-class="phcolor"
        />
        <view class="unit">厘米</view>
        <view class="clear"></view> -->
        <SwiperRuler
          ruleType="厘米"
          :defaultValue="mainData.height"
          :maxValue="maxHeight"
          :minValue="minHeight"
          @finishRuler="heightFinishFn"
        ></SwiperRuler>
      </view>
      <view class="inputBox">
        <view class="name lineHeight86">您的体重是?</view>
        <!-- 
        <input
          v-model="mainData.weight"
          type="digit"
          class="uni-input lineHeight86"
          name="weight"
          placeholder-class="phcolor"
        />
        <view class="unit">公斤</view>
        <view class="clear"></view> -->
        <SwiperRuler
          ruleType="公斤"
          :defaultValue="mainData.weight"
          :maxValue="maxWeight"
          :minValue="minWeight"
          @finishRuler="weightFinishFn"
        ></SwiperRuler>
      </view>
      <view class="inputBox">
        <view class="name lineHeight86">您的腰围是?</view>
        <!-- 
        <input
          v-model="mainData.weight"
          type="digit"
          class="uni-input lineHeight86"
          name="weight"
          placeholder-class="phcolor"
        />
        <view class="unit">公斤</view>
        <view class="clear"></view> -->
        <SwiperRuler
          ruleType="厘米"
          :defaultValue="mainData.waistline"
          :maxValue="maxWaistline"
          :minValue="minWaistline"
          @finishRuler="waistlineFinishFn"
        ></SwiperRuler>
      </view>

      <!-- 下一题上一题按钮 -->
      <fixed-bottom-button>
        <nextProBtnCom @nextBtn="nextBtn" @proBtn="proBtn"></nextProBtnCom>
      </fixed-bottom-button>
    </view>
  </view>
</template>

<script>
// import SwiperHeightRuler from '@/components/swiper-ruler/index';
import SwiperRuler from '@/components/swiper-ruler/index';
// import SwiperWeightRuler from '@/components/swiper-ruler/weight';
import { checkInt, checkBetween } from '@/common/assessKeyCheck';
import nextProBtnCom from '@/components/nextProButton';
import sickTitleCom from './sickTitleCom';
import { ajaxSend } from './ajaxHealth.js';
import { mapGetters } from 'vuex';
import { sendUserInfoForm } from '@/api/join.js';
import curIcon from '@/static/icon/cur.png';
export default {
  components: {
    // 上一题下一题组件
    nextProBtnCom,
    sickTitleCom,
    // SwiperHeightRuler,
    // SwiperWeightRuler,
    SwiperRuler
  },
  props: {
    uName: {
      type: String,
      required: true
    },
    uAge: {
      default: ''
    },
    uSex: {
      default: ''
    }
  },
  data() {
    return {
      curIcon,
      mainData: {
        height: 160,
        weight: 60,
        waistline: 80
      },
      maxHeight: 230,
      minHeight: 100,
      minWeight: 25,
      maxWeight: 200,
      maxWaistline: 150,
      minWaistline: 40,
      sexItem: [
        {
          name: '男',
          value: 1
        },
        {
          name: '女',
          value: 0
        }
      ],
      formData: {}
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    },
    assessPatientId() {
      return this.$store.getters.assessPatientId || wx.getStorageSync('assessPatientId');
    },
    ...mapGetters(['active', 'assessForm'])
  },

  methods: {
    choseSex(id) {
      // console.log(id);
      this.$set(this.formData, 'sex', id);
      // this.formData.sex = id;
      // console.log('this.formData:', this.formData);
    },
    bindDateChange: function (e) {
      this.$set(this.formData, 'birthday', e.target.value);
      // console.log('this.formData:', this.formData);
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 120;
      } else if (type === 'end') {
        year = year + 0;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    heightFinishFn(value) {
      this.mainData.height = value;
    },
    weightFinishFn(value) {
      this.mainData.weight = value;
    },
    waistlineFinishFn(value) {
      this.mainData.waistline = value;
    },
    async nextBtn() {
      // 校验用户性别和生日
      if (this.uSex === '' && this.formData.sex === undefined) {
        uni.showToast({ title: `用户性别不能为空`, icon: 'none' });
        return;
      }
      if (this.uAge === '' && this.formData.birthday === undefined) {
        uni.showToast({ title: `用户生日不能为空`, icon: 'none' });
        return;
      }
      if (this.uAge === '' || this.uSex === '') {
        // 提交用户性别和年龄
        let userInfoData = {
          name: this.uName,
          patientId: this.assessPatientId,
          ...this.formData
        };
        let uInfoRes = await sendUserInfoForm(userInfoData);
        if (uInfoRes.code !== 0) {
          uni.showToast({ title: uInfoRes.message, icon: 'none' });
          return;
        }
        this.$emit('getUserInfo');
      }

      // ②录入值格式校验
      // 校验字段是否符合范围或者类型规范等
      // 正整数校验
      if (checkInt(this.mainData.height)) {
        uni.showToast({ title: `身高请输入正整数`, icon: 'none' });
        return false;
      }
      if (checkBetween(this.mainData.height, '身高', 100, 223)) {
        uni.showToast({
          title: checkBetween(this.mainData.height, '身高', 100, 230),
          icon: 'none'
        });
        return false;
      }
      if (checkBetween(this.mainData.weight, '体重', 25, 200)) {
        uni.showToast({
          title: checkBetween(this.mainData.weight, '体重', 25, 200),
          icon: 'none'
        });
        return false;
      }
      if (checkInt(this.mainData.waistline)) {
        uni.showToast({ title: `腰围必须是正整数`, icon: 'none' });
        return false;
      }
      if (checkBetween(this.mainData.waistline, '腰围', 40, 150)) {
        uni.showToast({
          title: checkBetween(this.mainData.waistline, '腰围', 40, 150),
          icon: 'none'
        });
        return false;
      }
      // if (decimalTwo(this.mainData.weight)) {
      //   uni.showToast({ title: '体重数据错误，请重新输入', icon: 'none' });
      //   return false;
      // }
      // 提交vuex assessForm值
      let submitData = this.assessForm;
      Object.keys(this.mainData).forEach((key) => {
        submitData[key] = this.mainData[key];
      });
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 start
      const ajaxData = {
        BMI: (this.mainData.weight / Math.pow(this.mainData.height / 100, 2)).toFixed(2),
        waistline: this.mainData.waistline
      };
      submitData.BMI = ajaxData.BMI;
      const healthData = await ajaxSend(ajaxData);
      // let curActive = this.active + 1;
      // console.log('submitData:', submitData);
      if (healthData && healthData.length > 0) {
        // 如果有异常，则提示
        this.$store.commit('assessQuestion/SET_ASSESSFORM', submitData); // 存数据到vux
        this.$store.commit('assessQuestion/SET_AJAXRESMESSAGE', healthData); // 存提示信息到vux，数组格式
        this.$store.commit('assessQuestion/SET_AJAXRES', true); // 开启提示
      } else {
        this.$store.commit('assessQuestion/SET_ASSESSFORM', submitData);
        this.$store.commit('assessQuestion/SET_ACTIVE', 1);
        this.$store.commit('assessQuestion/SET_AJAXRES', false);
      }
      wx.pageScrollTo({
        scrollTop: 0
      });
      // 获取健康指标指导意见 判断是出健康提示还是直接下一步 end
    },
    proBtn() {
      // let curActive = this.active - 1;
      this.$store.commit('assessQuestion/SET_ACTIVE', 0);
    }
  }
};
</script>
<style lang="scss" scoped>
.comBox {
  .cont {
    background: #fff;
    padding: 24rpx 0rpx;
    .inputBox {
      margin-bottom: 30rpx;
      .name {
        width: 100%;
        float: none;
        text-align: center;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: black;
      }
    }
  }
  .u-info {
    background: white;
    margin: 30rpx 0rpx;

    box-sizing: border-box;
    .title {
      color: rgba(0, 0, 0, 0.55);
      font-size: 32rpx;
      padding: 14rpx 0rpx 14rpx;
      text-align: left;
      background: #d8f6d6;
      text-align: center;
    }
    .u-form {
      padding: 20px;
      .inputBox {
        border-bottom: 1px solid #e8e8e8;
        font-size: 30rpx;
        position: relative;
        padding: 10rpx 0;
        .mustInp {
          position: absolute;
          left: -10rpx;
          top: 30rpx;
        }
        .inputIcon {
          display: inline-block;
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -20rpx;
          z-index: 9;
          img {
            width: 40rpx;
            height: 40rpx;
          }
        }
        .uni-list {
          height: 86rpx;
          .uni-list-cell {
            height: inherit;
            .uni-list-cell-db {
              height: inherit;
              .uni-input {
                height: 86rpx;
                line-height: 86rpx;
              }
            }
          }
        }
      }
      .inputBox:last-child {
        border: none;
      }
      .clearInp {
        position: absolute;
        right: 0rpx;
        top: 16rpx;
        z-index: 99;
        display: inline-block;
        width: 80rpx;
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
      }
      .clearInp img {
        width: 28rpx;
        height: 28rpx;
      }
      .idAuthen {
        position: absolute;
        right: 100rpx;
        top: 50%;
        margin-top: -16rpx;
        z-index: 99;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.3);
        width: 64rpx;
        height: 32rpx;
        line-height: 32rpx;
        border-radius: 4rpx;
        text-align: center;
        color: #fff;
        font-size: 24rpx;
      }
      .inputBox .title {
        float: left;
      }
      .inputBox .name {
        float: left;
        width: 140rpx;
      }
      .inputBox .uni-input {
        float: left;
        width: 410rpx;
        color: rgba(0, 0, 0, 0.55);
        text-align: left;
        padding-right: 70rpx;
      }
      .inputBox .marginRN {
        padding-right: 0;
      }
      .clear {
        clear: both;
        overflow: hidden;
        zoom: 1;
        height: 0px;
      }
      .marginTop20 {
        margin-top: 20rpx;
      }
      .marginRight50 {
        margin-right: 50rpx;
      }
      .lineHeight86 {
        height: 86rpx;
        line-height: 86rpx;
      }
      .sickBox {
        font-size: 28rpx;
        margin: 0 auto;
        margin-top: 10rpx;
        text-align: left;
      }
      .sickBtn {
        width: 100rpx;
        display: inline-block;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        border: 2rpx solid #b2b2b2;
        margin: 0 20rpx;
        border-radius: 16rpx;
        position: relative;
      }
      .chose {
        border: 2rpx solid #f25559;
        color: #f25559;
        opacity: 1 !important;
      }
      .sickBtn .cur {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .sickBtn .cur {
        width: 46rpx;
        height: 46rpx;
      }
      .sickBtn .cur img {
        width: 100%;
        height: 100%;
      }
      .sickBtn:first-child {
        margin-left: 0;
      }
      .sickBtn:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
